<template>
  <el-card class="category-rank">
    <p>品类分布</p>
    <div class="category-rank-chart" ref="categoryRankRef"></div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "categoryRank",
};
</script>

<script lang="ts" setup>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";

const categoryRankRef = ref();

onMounted(() => {
  const myEchart = echarts.init(categoryRankRef.value);
  const data = [
    {
      name: "螺蛳粉",
      value: 55,
    },
    {
      name: "可乐鸡翅",
      value: 45,
    },
    {
      name: "炸鸡",
      value: 67,
    },
    {
      name: "麻辣烫",
      value: 60,
    },
    {
      name: "花甲粉",
      value: 30,
    },
    {
      name: "上饶烤鸡腿",
      value: 80,
    },
    {
      name: "惠林顿牛排",
      value: 36,
    },
  ];
  const option = {
    title: {
      text: "累计订单量",
      textStyle: {
        fontSize: 14,
      },
      subtext: "406",
      subtextStyle: {
        fontSize: 25,
      },
      left: "center",
      top: "42%",
    },
    series: [
      {
        name: "品类分布",
        type: "pie",
        data,
        radius: ["40%", "60%"],
      },
    ],
    tooltip: {
      formatter: "{a}<br /> {b}<br /> 数量：{c} <br />百分比：{d}",
    },
    legend: {
      top: "middle",
      right: 0,
      orient: "vertical",
      formatter(name: string) {
        return `${name} | ${data.find((item) => item.name === name)?.value}`;
      },
    },
  };
  myEchart.setOption(option);
});
</script>

<style scoped>
.category-rank {
  margin-top: 20px;
}
.category-rank-chart {
  height: 300px;
}
</style>
